Thank you for your purchase! If you have any questions that you feel should have been in this document, please log in using the account used to purchase the file and email via my user page contact form here. Thanks so much!
For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priority. You will need some knowledge of HTML/CSS to edit this theme
Do not start from scratch, use an existing page we were created and modify it, it will save you time and better for your performance at work.
Quickly find what you're looking for in this document by using your browser's "Find in Page" feature, typically Control+F (Command+F).
Trying to locate/replace text, styles or code in themes? "Find in Files" command which is commonly found in any decent text editor which will save you hours of searching.
Please use Sublime Text Editor (Recommend).
Getting an error message, chances are someone else has seen it too, try a google search for a quick fix.
Many times plugins are to blame when a site fails, always try disabling any third-party plugins if you encounter an error you can't solve.
Please use image dimension same the image dimension in our template.
Don't forget to re-explore the live demo for layouts, usage ideas and sample code.
You can really easily customize all part of site or build new.
This div contains the loading screen
<!-- Load page --> <div class="animationload"> <div class="loader"> </div> </div> <!-- End load page -->
Menu has the following structure.
<!-- Header --> <header id="header"> <div class="navbar text-center"> <div class="container"> <!-- menu --> <nav id="navigation-menu" role="navigation"> <ul class="nav navbar-nav animated" data-animation="fadeIn" data-animation-delay="300"> <li><a class="active gohome">Home</a></li> <li><a class="gosubscribe">Subscribe</a></li> <li><a class="goabout">About</a></li> <li><a class="gocontact">Contact</a></li> <li><a class="gofeatures">Features</a></li> </ul> </nav> <!-- end menu --> </div> <!-- end container --> </div> </header> <!-- end Header -->
Home has the following structure.
<!-- Home page --> <div class="row"> <div class="col-sm-12 text-center"> <div class="animated" data-animation="fadeIn" data-animation-delay="500"> <h2 class="uppercase">Coming soon</h2> <h4>Our Website Is Coming Soon</h4> </div> </div> </div> <div class="row"> <div class="col-sm-12 text-center"> <div class="animated" data-animation="fadeIn" data-animation-delay="500"> <div class="boy"> <div class="boy-building"> <div class="hand"></div> </div> <div class="dog"> <div class="tail"></div> </div> </div> </div> </div> </div> <!-- End Home page -->
Watch has the following structure.
<!-- section watch --> <div class="row"> <div class="col-sm-12 text-center"> <!-- Watch --> <div id="watch" class="animated" data-animation="fadeIn" data-animation-delay="600"> <!-- Days --> <div class="dash days_dash"> <div class="digit">0</div> <div class="digit">6</div> <span class="dash_title">Days</span> </div> <!-- End Days --> <!-- Hours --> <div class="dash hours_dash"> <div class="digit">1</div> <div class="digit">2</div> <span class="dash_title">Hours</span> </div> <!-- End Hours --> <!-- Minutes --> <div class="dash minutes_dash"> <div class="digit">0</div> <div class="digit">5</div> <span class="dash_title">Minutes</span> </div> <!-- End Minutes --> <!-- Seconds --> <div class="dash seconds_dash"> <div class="digit">3</div> <div class="digit">9</div> <span class="dash_title">Seconds</span> </div> <!-- End Seconds --> </div> <!-- End Watch --> </div> </div>
Subscribe has the following structure.
<!-- Subscribe --> <div class="subscribe item"> <!-- section title --> <div class="row"> <div class="col-sm-12 text-center"> <div class="titlebar"> <h2 class="animated" data-animation="fadeIn" data-animation-delay="700"> Subscribe To Our Newsletter</h2> <div class="subscribe-logo animated" data-animation="fadeIn" data-animation-delay="700"> </div> </div> </div> </div> <!-- section text --> <div class="row"> <div class="col-sm-12 text-center subscribe-text"> <p class="animated" data-animation="fadeIn" data-animation-delay="600"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div> </div> <!-- section newsletter --> <div class="row"> <div class="col-sm-12 text-center"> <div class="footerbar animated" data-animation="fadeIn" data-animation-delay="500"> <form name="subscribe-form" id="subscribe-form" method="post"> <input type="text" name="email" id="subscribe-input" class="subscribe-input" value="" placeholder="Enter Your Email Address" /> <input type="submit" class="subscribe-submit" id="subscribe-submit" value="Subscribe" /> </form> </div> </div> </div> </div> <!-- end Subscribe -->
About has the following structure.
<!-- About Us --> <div class="about-us item"> <!-- section title --> <div class="row"> <div class="col-sm-12 text-center"> <div class="titlebar"> <h2 class="animated" data-animation="fadeIn" data-animation-delay="700">About Us</h2> <div class="about-logo animated" data-animation="fadeIn" data-animation-delay="700"></div> </div> </div> </div> <!-- section text --> <div class="row"> <div class="col-sm-6 about-text animated" data-animation="fadeIn" data-animation-delay="600"> <h3 class="animated" data-animation="fadeIn" data-animation-delay="600">Who We Are?</h3> <p class="animated" data-animation="fadeIn" data-animation-delay="600"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="col-sm-6 about-text animated" data-animation="fadeIn" data-animation-delay="500"> <h3 class="animated" data-animation="fadeIn" data-animation-delay="500">What We Do?</h3> <p class="animated" data-animation="fadeIn" data-animation-delay="500"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> </div> </div> </div> <!-- end About Us -->
Contacts has the following structure.
<!-- Contact Us --> <div class="contact-us item"> <!-- section title --> <div class="row"> <div class="col-sm-12 text-center"> <div class="titlebar"> <h2 class="animated" data-animation="fadeIn" data-animation-delay="700">Get In Touch</h2> <div class="contact-logo animated" data-animation="fadeIn" data-animation-delay="700"></div> </div> </div> </div> <!-- section text --> <div class="row"> <div class="col-sm-12 text-center contact-text"> <p class="animated" data-animation="fadeIn" data-animation-delay="600"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p> </div> </div> <!-- contact form --> <div class="row"> <div class="col-sm-12 text-center"> <form id="contact-form" class="animated" data-animation="fadeIn" data-animation-delay="700" action="assets/php/contact.php" method="post"> <input type="text" name="name" id="contact-form-name" value="" placeholder="Name" /> <input type="text" name="email" id="contact-form-email" value="" placeholder="Email Address" /> <input type="text" name="subject" id="contact-form-subject" value="" placeholder="Subject" /> <div> <textarea placeholder="Message" name="message" id="contact-form-message"></textarea> </div> <input type="submit" value="Send Message" id="contact-form-submit" /> </form> </div> </div> </div> <!-- end Contact Us -->
Features has the following structure.
<!-- Features --> <div class="features item"> <!-- section title --> <div class="row"> <div class="col-sm-12 text-center"> <div class="titlebar"> <h2 class="animated" data-animation="fadeIn" data-animation-delay="700">Our Features</h2> <div class="features-logo animated" data-animation="fadeIn" data-animation-delay="700"></div> </div> </div> </div> <!-- section text --> <div class="row"> <div class="col-sm-4 features-text animated" data-animation="fadeIn" data-animation-delay="600"> <h3 class="animated" data-animation="fadeIn" data-animation-delay="900"> <img src="assets/img/pencil.png" alt="flower" />Clear Design</h3> <p class="animated" data-animation="fadeIn" data-animation-delay="1000"> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-sm-4 features-text animated" data-animation="fadeIn" data-animation-delay="600"> <h3 class="animated" data-animation="fadeIn" data-animation-delay="900"> <img src="assets/img/fonts.png" alt="mobile" />Google Fonts</h3> <p class="animated" data-animation="fadeIn" data-animation-delay="1000"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="col-sm-4 features-text animated" data-animation="fadeIn" data-animation-delay="600"> <h3 class="animated" data-animation="fadeIn" data-animation-delay="900"> <img src="assets/img/comp.png" alt="tools" />Fully Responsive</h3> <p class="animated" data-animation="fadeIn" data-animation-delay="1000"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div> <!-- end Features -->
Footer has the following structure.
<!-- Footer --> <footer id="footer"> <div class="container"> <!-- footer socials --> <div class="row"> <div class="footer_socials col-sm-12 text-center"> <div class="contact_icons"> <ul class="contact_socials clearfix animated" data-animation="fadeIn" data-animation-delay="600"> <!-- social icons --> <li><a class="ukie_social" href="#"><i class="fa fa-facebook"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-twitter"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-google-plus"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-linkedin"></i></a></li> <!-- <li><a class="ukie_social" href="#"><i class="fa fa-behance"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-dribbble"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-pinterest"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-digg"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-deviantart"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-envelope-square"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-delicious"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-instagram"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-dropbox"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-skype"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-youtube"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-tumblr"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-vimeo-square"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-flickr"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-github-alt"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-renren"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-vk"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-xing"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-weibo"></i></a></li> <li><a class="ukie_social" href="#"><i class="fa fa-rss"></i></a></li> --> </ul> </div> </div> </div> <!-- end footer socials --> </div> <!-- end container --> </footer> <!-- end footer -->
Similarly for other patterns.
I used some CSS files in this template. By using of them, we can work round this. Those files also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere.
CSS has the following structure:
If you create you own styles you must check all the sizes of responsive so all works ok, if you need to change your own styles at certain size you will do it at respons.css.
You can see some help info, when click links which are below each regarding script:
To add new scripts you can use scripts.js or create your own js
You can change the counter in scripts.js:
$('#watch').countDown({ targetDate: { 'day': 29, 'month': 9, 'year': 2015, 'hour': 11, 'min': 13, 'sec': 0 }, omitWeeks: true });
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.
If you have a more general question relating to the themes on ThemeForest, basic HTML/CSS/JavaScript related questions, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Regards,
UkieWeb